import { PureComponent } from 'react'
import { connect } from 'react-redux';
import * as action from '../../actions/user'
import Errors from '../../components/Errors'
import SettingFrom from './SettingFrom';
import { store } from '../../store/index';
import { replace } from 'connected-react-router';


class Setting extends PureComponent {



  render() {
    const { errors } = this.props
    // console.log('resig errors', errors);
    return (
      <div className='container page'>
        <div className='row'>
          <div className='col-md-6 offset-md-3 col-xs-12'>
            <h1>修改用户信息</h1>
            <br />
            {/* 调转到登录 */}
            {/* <p className='text-xs-center'>
              <Link to='/login'>
                有账号直接登录?
              </Link>
            </p> */}


            {/* 错误显示 */}
            <Errors errors={errors} />
            {/* 设置from表单 */}
            <SettingFrom />
            {/* 设置退出按钮 */}

            <button
              className='btn btn-outline-danger'
              onClick={this.props.onClickLogout}>
              退出
            </button>
          </div>
        </div>
      </div>
    )

  }
  componentDidUpdate(preProps) {
    if(this.props.redirect&& this.props.redirect!==preProps.redirect){
      store.dispatch(replace(this.props.redirect))
    }
  }
}

const mapState = state => ({ ...state.user })

//行为
const mapDispatch = dispatch => {
  return {
    onUnload: () => dispatch(action.unload()),
    onClickLogout: () => dispatch(action.logout())  //退出
  }
}

export default connect(mapState, mapDispatch)(Setting)